<template>
  <el-container style="height: 98vh; border: 1px solid #eee;background: #fff">
     <SideBar />
	 <el-container >
		<el-header style="width: 95%;margin-top: 10px;">
			<HeadBar/>
		</el-header>
	    <el-main>
			<div style="margin: 40px;">
				<el-select v-model="building" placeholder="请选择教学楼" style="margin-right: 40px;" clearable>
					<el-option v-for="item in optionsBuilding" :key="item.building" :label="item.label" :value="item.building"></el-option>			
				</el-select>
				<el-select v-model="scale" placeholder="请选择教室类型" style="margin-right: 40px;" clearable>
					<el-option v-for="item in optionsScale" :key="item.scale" :label="item.label" :value="item.scale"></el-option>
				</el-select>
				<el-select v-model="weekday" placeholder="请选择日期" style="margin-right: 40px;" clearable>
					<el-option v-for="item in optionsWeek" :key="item.weekday" :label="item.label" :value="item.weekday"></el-option>
				</el-select>
				<el-checkbox v-model="aircon" label="空调" border></el-checkbox>
				<el-checkbox v-model="computer" label="多媒体" border></el-checkbox>
				<el-button @click="findRoom" type="primary" round style="margin-left:40px;">查询</el-button>
				 <div style="display: flex; align-items: center; margin-top: 40px;">
				    <span style="margin-right: 20px;
								  font-family: system-ui;
								  font-size: 14px;
								  color: #5a5e66;
								  font-weight: 500;
								  letter-spacing: 0.3px;">请选择空闲节次</span>
				    <el-slider 
				      v-model="classtime" 
				      range 
				      show-stops 
				      :max="9" 
					  :marks="mark"
				      style="flex: 1; width:600px;">
				    </el-slider>
				  </div>
			</div>
			<div class="container">
			    <div v-if="error" class="status-box error">❌ 数据加载失败: {{ errorMessage }}</div>
			
			    <div v-else class="classroom-grid">
			      <div 
			        v-for="room in classrooms" 
			        :key="room.roomid"
			        class="classroom-card"
			        :class="{'has-aircon': room.aircon, 'has-computer': room.computer}"
			      >
			        <div class="card-header">
			          <span class="room-number">{{ room.room }}</span>
			          <span class="capacity">👥 {{ room.scale * 50 }}人</span>
			        </div>
			        
			        <div class="facilities">
			          <div class="facility-item">
			            <i class="el-icon-sunny" :class="room.aircon ? 'active' : ''"></i>
			            {{ room.aircon ? '空调可用' : '无空调' }}
			          </div>
			          <div class="facility-item">
			            <i class="el-icon-video-camera-solid" :class="room.computer ? 'active' : ''"></i>
			            {{ room.computer ? '配备多媒体' : '无多媒体' }}
			          </div>
			        </div>
			      </div>
			    </div>
			  </div>
	    </el-main>
	  </el-container>
  </el-container>
</template>

<script>
import SideBar from '@/components/SideBar.vue'
import HeadBar from '@/components/HeadBar.vue'
import request from "@/utils/request";

export default {
	components:{SideBar,HeadBar},
	data(){
		return{
			optionsBuilding:[{
				building:'A',
				label:'教学楼A'
			},{
				building:'B',
				label:'教学楼B'
			},{
				building:'C',
				label:'教学楼C'
			}],
			
			optionsScale:[{
				scale:1,
				label:'小教室'
			},{
				scale:2,
				label:'大教室'
			},{
				scale:3,
				label:'阶梯教室'
			}],
			
			optionsWeek:[{
				weekday:1,
				label:'星期一'
			},{
				weekday:2,
				label:'星期二'
			},{
				weekday:3,
				label:'星期三'
			},{
				weekday:4,
				label:'星期四'
			},{
				weekday:5,
				label:'星期五'
			},{
				weekday:6,
				label:'星期六'
			},{
				weekday:7,
				label:'星期日'
			}],
			
			mark:{
				3:'3',
				6:'6'
			},
			building:'',
			scale:null,
			weekday:null,
			classtime:[0,0],
			aircon:false,
			computer:false,
			aircon_1:0,
			computer_1:0,
			classrooms: [],
			error: false,
			errorMessage: ''
		}
	},
	methods:{
		test(){
			console.log(this.building)
			console.log(this.scale)
			console.log(this.classtime[0])
			console.log(this.weekday)
			console.log(this.aircon)
			console.log(this.computer)
			
		},
		findRoom(){
			if(this.aircon){
				this.aircon_1 = 1
			}
			else{
				this.aircon_1 = 0
			}
			if(this.computer){
				this.computer_1 = 1
			}
			else{
				this.computer_1 = 0
			}
			if(this.weekday == null){
				this.weekday = 0
			}
			if(this.scale == null){
				this.scale = 0
			}
			if(this.classtime[0]+this.classtime[1]+this.weekday !=0 && this.classtime[0]*this.classtime[1]*this.weekday==0){
				this.$message({
					type:"error",
					message:"请输入正确的时间"
				})
			}
			else{
				var url = "/room/findRoom?aircon="+this.aircon_1+
																"&building="+this.building+
																"&computer="+this.computer_1+
																"&endTime="+this.classtime[1]+
																"&scale="+this.scale+
																"&startTime="+this.classtime[0]+
																"&weekday="+this.weekday
				request.get(url).then(res=>{
					if(res.data.state==0){
						this.classrooms = res.data.data
						console.log(this.classrooms)
					}
				})
			}
			
			if(this.weekday == 0){
				this.weekday = null
			}
			if(this.scale == 0){
				this.scale = null
			}
			
		}
	}
}
</script>

<style scoped>
.container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 状态提示 */
.status-box {
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  margin: 20px 0;
}
.loading { background: #e6f4ff; color: #1890ff; }
.error { background: #fff2f0; color: #ff4d4f; }

/* 教室网格布局 */
.classroom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 10px 0;
}

/* 单个卡片样式 */
.classroom-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s;
  border: 1px solid #e8e8e8;
  margin:20px
}

.classroom-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.room-number {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.capacity {
  font-size: 14px;
  color: #666;
  background: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
}

/* 设备信息 */
.facilities {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.facility-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

/* 图标样式 */
.icon-aircon,
.icon-computer {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  opacity: 0.6;
}


/* 激活状态的图标 */
.active {
  opacity: 1;
  filter: hue-rotate(120deg);
}

/* 特殊状态卡片边框 */
.has-aircon { border-left: 4px solid #40a9ff; }
.has-computer { border-right: 4px solid #73d13d; }
</style>